import { message, Slider } from 'antd';
import { useCallback, useEffect, useRef, useState } from 'react';

const VideoFilter = () => {
    const [filterVals, setFilterVals] = useState({
        grayscale: 0,   // 灰度
        invert: 0,      // 反转
        opacity: 1,     // 透明度
        saturate: 100,    // 饱和度
        contrast: 1,    // 对比度
        brightness: 1,  // 亮度
        blur: 0,        // 模糊度
    });

    const updateFilterVal = (key: keyof typeof filterVals, value: number) => {
        setFilterVals(prevState => {
            return { ...prevState, [key]: value };
        });
    }

    const videoRef = useRef<HTMLVideoElement>(null)
    const handleErr = (e: Error) => {
        message.error(e?.message || `摄像头打开失败`);
        console.log('getUserMedia err: ', e);
    }

    const openCamera = useCallback(async () => {
        try {
            const stream = await navigator.mediaDevices.getUserMedia({video: true});
            const video = videoRef.current as HTMLVideoElement;
            video.srcObject = stream;
        } catch (e) {
            handleErr(e as Error);
        }
    }, []);

    useEffect(() => {
        openCamera();
    }, [openCamera]);

    return (
        <div>
            <h3>视频滤镜</h3>
            <div style={{ display: 'flex' }}>
                <video
                    ref={videoRef}
                    controls
                    width={640}
                    autoPlay
                    style={{
                        filter: `
                            grayscale(${filterVals.grayscale}%)
                            invert(${filterVals.invert}%)
                            opacity(${filterVals.opacity})
                            blur(${filterVals.blur}px)
                            contrast(${filterVals.contrast})
                            saturate(${filterVals.saturate}%)
                            brightness(${filterVals.brightness})
                        `
                    }}
                ></video>

                <div style={{ width: 240, marginLeft: '60px' }}>
                    <div>
                        <span>灰度：</span>
                        <Slider
                            value={filterVals.grayscale}
                            onChange={(e) => updateFilterVal('grayscale', e.valueOf())} min={0} max={100}
                        />
                    </div>
                    <div>
                        <span>反转：</span>
                        <Slider
                            value={filterVals.invert}
                            onChange={(e) => updateFilterVal('invert', e.valueOf())} min={0} max={100}
                        />
                    </div>
                    <div>
                        <span>透明度：</span>
                        <Slider
                            value={filterVals.opacity}
                            onChange={(e) => updateFilterVal('opacity', e.valueOf())} step={0.1} min={0} max={1}
                        />
                    </div>

                    <div>
                        <span>高斯模糊：</span>
                        <Slider
                            value={filterVals.blur}
                            onChange={(e) => updateFilterVal('blur', e.valueOf())} step={0.2} min={0} max={20}
                        />
                    </div>

                    <div>
                        <span>对比度：</span>
                        <Slider
                            value={filterVals.contrast}
                            onChange={(e) => updateFilterVal('contrast', e.valueOf())} step={0.5} min={0} max={10}
                        />
                    </div>

                    <div>
                        <span>饱和度：</span>
                        <Slider
                            value={filterVals.saturate}
                            onChange={(e) => updateFilterVal('saturate', e.valueOf())} min={0} max={100}
                        />
                    </div>

                    <div>
                        <span>亮度：</span>
                        <Slider
                            value={filterVals.brightness}
                            onChange={(e) => updateFilterVal('brightness', e.valueOf())} step={0.5} min={0} max={10}
                        />
                    </div>
                </div>
            </div>
        </div>
    );
}

export default VideoFilter;
